<template>

    <view class="t-flex wrap">
        <view class="itembox " v-for="item,index in list" :key="index">
        	<uv-image class="item" width="120rpx" height="120rpx":src="$str.img(item.url)" mode="aspectFill" 
			v-if="['jpg','jpeg','png','bmp','gif'].includes(getFileType(item.url))"
			 @click="previewImg($str.img(item.url),0)"
			 />
        	<view class="item filebox t-flex center" v-else  @click="pre($str.img(item.url))">
        	    <image :src="iconConfig.includes(getFileType(item.url))?`/static/fileicon/${getFileType(item.url)}.png`:'/static/fileicon/unknow.png'" class="icon" />
        	</view>
        	<image src="../../static/icons/29.png" mode="aspectFit" class="close"
			@click.stop="emit('close',index)"
			v-if="shoeClose"
			></image>
			<view class="f22 c9 mt10 nowrap">
				{{item.name}}
			</view>
        </view>
    </view>

    
</template>

<script setup >
import { previewImg } from '../../lib/ts/util';

	const emit = defineEmits(['close'])

    //预设的文件展示图标
    let iconConfig = ['jpg','png','bmp','jpeg','gif','rar','zip','wav','webm','pdf','mp4','mp3','psd']
	
	

    defineProps({
        list:{
            type:Array,
            default:[]
        },
		shoeClose:{
			type:Boolean,
			default:true
		}
    })

    //截取链接后缀
    const getFileType = (str)=>{
        return str.split('.').reverse()[0]
    }

    //预览
    const pre = (e)=>{
        let  fileType = getFileType(e)
		if(['wav','webm','mp4'].includes(fileType)){
			uni.navigateTo({
				url:'/pages/public/video?url='+e
			})
		}else if(fileType == 'pdf'){
			uni.showLoading({
				mask:true,
				title:'正在下载...'
			})
			uni.downloadFile({
				url:e,
				success(e) {
					uni.openDocument({
						filePath:e.tempFilePath,
					})
				},
				fail(e) {
					console.log(e,'fail')
				},
				complete() {
					uni.hideLoading()
				}
			})
		}else{
			uni.showModal({
				title:'提示',
				content:'不支持在线预览该类型的文件,您可以选择下载到本地',
				confirmText:'复制链接',
				success(e) {
					if(e.confirm){
						uni.setClipboardData({
							data:e,
						})
					}
				}
			})
		}
    }
	
	defineExpose({
		iconConfig
	})

</script>

<style scoped lang="scss">
    .item{
        
    }
    .filebox{
        width: 120rpx;
        height: 120rpx;
        background: #F9F9F9;
        border-radius: 2px;
        border: 1px solid #ECECEC;
        display: inline-flex;
        .icon{
            width: 50%;
            height: 50%;
        }
        &:hover{
            background-color: #fff;
        }
    }
	
	.itembox{
		position: relative;
		display: inline-block;
		margin-right: 15px;
		margin-bottom: 20rpx;
		width: 120rpx;
		&:nth-child(4n){
			margin-right: 0;
		}
	}
	.nowrap{
		text-align: center;
	}
	
	.close{
		position: absolute;
		right: 4rpx;
		top: 4rpx;
		width: 40rpx;
		height: 40rpx;
		z-index: 20;
		background-color: #fff;
		border-radius: 50%;
	}


</style>